<template>
  <view class="loginBox">
    <!-- <image
      src="../../static/login.png"
      mode=""></image> -->
    <uni-forms
      class="login-form"
      ref="form"
      :modelValue="formData"
      :rules="rules">
      <uni-forms-item name="phone">
        <input
          v-model="formData.phone"
          inputmode="numeric"
          type="number"
          placeholder="手机号"
          class="uni-input-input"
          placeholder-style="color: #818181" />
      </uni-forms-item>
      <uni-forms-item name="captcha">
        <input
          v-model="formData.captcha"
          type="number"
          inputmode="numeric"
          placeholder="验证码"
          class="uni-input-input"
          placeholder-style="color: #818181" />
        <text
          class="text-button"
          @click.stop="getCode"
          >{{ times }}</text
        >
      </uni-forms-item>
      <button
        class="submit-button"
        @click.stop="submit">
        登录
      </button>
    </uni-forms>
  </view>
</template>

<script>
  import { getCode } from '@/apis/user'
  import { getToken } from '@/utils/auth'
  export default {
    name: 'Login',
    data() {
      return {
        formData: {
          phone: '',
          captcha: ''
        },
        timer: '',
        times: '获取验证码',
        getcodestatus: true,
        rules: {
          phone: {
            rules: [
              {
                required: true,
                errorMessage: '请输入手机号'
              },
              {
                validateFunction: function (rule, value, data, callback) {
                  let iphoneReg =
                    /^1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/ //手机号码
                  if (!iphoneReg.test(value)) {
                    callback('手机号码格式不正确，请重新填写')
                  }
                }
              }
            ]
          },
          captcha: {
            rules: [
              {
                required: true,
                errorMessage: '请输入验证码'
              }
            ]
          }
        },
        storeId: ''
      }
    },
    onLoad() {
      if (getToken()) {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    },
    methods: {
      async getCode() {
        if (this.getcodestatus) {
          const reg =
            /^1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
          if (reg.test(this.formData.phone)) {
            const res = await getCode({ phone: this.formData.phone })
            console.log('验证码信息：', res)
            if (res.code === 200) {
              uni.utils.toast('验证码已发送')
              let time = 60
              this.timer = setInterval(() => {
                time = time - 1
                console.log(time)
                this.getcodestatus = false
                this.times = time + 's'
                if (time < 1) {
                  clearInterval(this.timer)
                  this.times = '重新获取'
                  this.getcodestatus = true
                }
              }, 1000)
            } else {
              uni.utils.toast(res.data.message)
            }
          } else {
            uni.utils.toast('请输入正确的手机号')
          }
        }
      },
      // 触发提交表单
      submit() {
        this.$refs.form
          .validate()
          .then(async (res) => {
            console.log('表单数据信息：', res)
            this.$store
                .dispatch('user/login', {
                  ...this.formData
                })
                .then(() => {
                  console.log('登录成功')
                })
          })
          .catch((err) => {
            console.log('失败')
            console.log('表单错误信息：', err)
          })
      }
    }
  }
</script>

<style scoped lang="scss">
  .loginBox {
    padding: 40rpx;
    image {
      width: 100%;
      height: 346px;
      margin: 10px 0;
    }
  }
  .uni-forms-item {
    height: 100rpx;
    margin-bottom: 20 !important;
    border-bottom: 2rpx solid #999999;
    box-sizing: border-box;
  }

  ::v-deep .uni-forms-item__content {
    display: flex;
    align-items: center;
  }

  ::v-deep input {
    width: 100%;
    font-size: $uni-font-size-base;
    color: $uni-main-color;
  }

  ::v-deep .uni-forms-item__error {
    width: 100%;
    padding-top: 10rpx;
    border-top: 2rpx solid $uni-primary;
    color: $uni-primary;
    font-size: $uni-font-size-small;
    transition: none;
  }

  .text-button {
    width: 300rpx;
    padding-left: 10rpx;
    text-align: center;
    font-size: $uni-font-size-small;
    // color: $uni-main-color;
    color: #0180FF;
    border-left: 2rpx solid #eee;
  }

  .submit-button {
    width: 670rpx;
    height: 108rpx;
    line-height: 100rpx;
    /* #ifdef APP */
    padding-top: 4rpx;
    /* #endif */
    margin-top: 80rpx;
    border: none;
    color: #fff;
    background: linear-gradient(90deg, #05D4FD 0%, #2976FF 100%);
    border-radius: 54rpx;
    font-size: 48rpx;
  }

  button[disabled] {
    background-color: #fadcd9;
    color: #fff;
  }
</style>
